<template>
  <div>
    <input type="button" value="我是父组件中的按钮" @click="show">
    <child :popShow.sync="isShow" v-show="isShow" />
    <el-button @click="testData">数据处理</el-button>
    <el-button @click="chain">可选链数据</el-button>
    <el-button @click="mAddview">mapMutations</el-button>
    <el-button @click="addView">mapActions</el-button>
    <el-button @click="userAddView">useStore</el-button>
    <p>
      　　mapState方式 {{viewsCount}}-{{testView}}
      <br>
      blogNumber{{this.$store.state.test.blogNumber}}
      　　直接使用views {{this.$store.state.test.views}}
    </p>
    <p>
      　　mapState方式 {{userview}}
      　　直接使用user views {{this.$store.state.user.views}}
    </p>
    <tree></tree>
  </div>
</template>
<script>
import child from '@/components/child'
import tree from '@/components/tree'
import funMixin from '@/components/mixin'
import json from '@/assets/data.json'
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
export default {
  components: {
    child,
    tree,
  },
  mixins: [funMixin],
  data() {
    return {
      isShow: false,
      flowData: {},
      adventurer: {
        name: 'Alice',
        cat: {
          name: 'Dinah',
        },
      },
    }
  },
  computed: {
    ...mapState({ testView: 'views' }),
    ...mapState({
      viewsCount: (state) => state.test.views,
    }),
    ...mapState({
      userview: (state) => state.user.views,
    }),
  },
  mounted() {
    console.log('mounted:', json)
    this.flowData = json.data.processData.nodeConfig
  },

  methods: {
    ...mapMutations({
      mAddview: 'addViews', // clickTotal 是mutation 里的方法，totalAlise是重新定义的一个别名方法，本组件直接调用这个方法
    }),
    ...mapActions({
      addView: 'storeActaddViews', // 第一个blogAdd是定义的一个函数别名称，挂载在到this(vue)实例上，后面一个blogAdd 才是actions里面函数方法名称
    }),
    // ...mapMutations( {
    //   userAddView: 'addViews',
    // }),
    userAddView(){
      this.$store.commit('addViews')
    },
    show() {
      this.isShow = true
    },
    changeIsShow(bol) {
      this.isShow = bol
    },
    testData() {
      this.mixinFun()
      const data = this.flowData
      // const cc = this.mixinDelJsonItem(data)
      // console.log('delJsonItem', JSON.stringify(cc))
      const dd = this.reSetFlowNodeId(data, 0)
      console.log('setNodeId', JSON.stringify(dd))
    },
    chain() {
      const dogName = this.adventurer.dog?.name
      const age = this.adventurer.dog?.age
      console.log('可选链内容', dogName, age)
    },
  },
}
</script>